<template>
  <el-tag 
    :type="tagType" 
    :size="size"
    :effect="effect"
    class="release-plan-status-tag"
  >
    <el-icon class="status-icon" v-if="showIcon">
      <component :is="statusIcon" />
    </el-icon>
    {{ statusText }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  Edit,
  Clock,
  Check,
  Close,
  VideoPlay
} from '@element-plus/icons-vue'

interface Props {
  status: string
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'
  showIcon?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light',
  showIcon: true
})

// 状态配置映射
const statusConfig = {
  draft: {
    type: 'info',
    text: '草稿',
    icon: Edit
  },
  pending_approval: {
    type: 'warning',
    text: '待审批',
    icon: Clock
  },
  approved: {
    type: 'success',
    text: '已审批',
    icon: Check
  },
  rejected: {
    type: 'danger',
    text: '已拒绝',
    icon: Close
  },
  executed: {
    type: 'primary',
    text: '已执行',
    icon: VideoPlay
  }
} as const

// 计算属性
const tagType = computed(() => {
  return statusConfig[props.status as keyof typeof statusConfig]?.type || 'info'
})

const statusText = computed(() => {
  return statusConfig[props.status as keyof typeof statusConfig]?.text || props.status
})

const statusIcon = computed(() => {
  return statusConfig[props.status as keyof typeof statusConfig]?.icon || Edit
})
</script>

<style scoped>
.release-plan-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-icon {
  font-size: 12px;
}
</style>